<script setup>
import { ref } from "vue";
import { noneLinks as mallLinks } from "../public/mall-links";

const url = ref("");
const img = ref("");
const name = ref("");
let num = 0;

const  debounce = (func, wait = 200, immediate) => {
	let timer
	return function (...args) {
		if (timer) clearTimeout(timer)
		if (immediate) {
			timer = null
			return func.apply(this, args)
		}
		timer = setTimeout(() => {
			func.apply(this, args)
		}, wait)
	}
}

const intercept = () => {
  setTimeout(() => {
    chrome.tabs.captureVisibleTab((data) => {
      img.value = data;
      chrome.downloads.download(
        {
          url: data,
          filename: `${name.value || '图片'}.jpg`,
        },
        () => {
          url.value = "";
          img.value = "";
          num += 1;
          batch(num);
        }
      );
    });
  }, 8000);
};

const onSearch = async () => {
  const [tab] = await chrome.tabs.query({ active: true });
  chrome.tabs.update(tab.id, { url: url.value, active: true });
};

const onUpdate = () => {
  chrome.tabs.onUpdated.addListener(debounce((tabId, changeInfo, page) => {
    if (changeInfo.status === "complete") {
      intercept();
    }
  }, 50));
};

// const initImage = () => {
//   const image = new Image()
//   image.setAttribute("crossOrigin", "anonymous");
//   image.src = img.value
//   image.onload = () => {
//     const canvas = document.createElement("canvas");
//     canvas.width = image.width;
//     canvas.height = image.height;
//     const context = canvas.getContext("2d");
//     context.drawImage(image, 0, 0, image.width, image.height);
//     const url = canvas.toDataURL('image/jpeg')
//     download(url)
//   }
// }

// const download = (url) => {
//   let a = document.createElement("a")
//   let event = new MouseEvent("click")
//   a.download = name.value
//   a.href = url
//   a.dispatchEvent(event)
// }

const batch = async () => {
  if (num >= mallLinks.length) return;
  url.value = mallLinks[num].url;
  name.value = mallLinks[num].fileName
  onSearch();
};

onUpdate();
</script>

<template>
  <div class="root">
    <div class="input_box">
      <input v-model="url" placeholder="请输入网址" />
      <button class="search" @click="onSearch">搜索</button>
    </div>
    <div class="image">
      <img :src="img" />
      <button class="operate" @click="batch">批量</button>
    </div>
  </div>
</template>

<style>
* {
  padding: 0;
  margin: 0;
}

.root {
  padding: 20px;
  text-align: center;
}

.input_box {
  display: flex;
  align-items: center;
}

.search {
  background-color: #1989fa;
  border: none;
  color: #fff;
  font-size: 14px;
  width: 50px;
  height: 40px;
  border-radius: 5px;
  margin-left: 8px;
}

input {
  border: none;
  outline: none;
  width: 300px;
  height: 30px;
  background-color: #f5f5f5;
  padding: 5px 10px;
  border-radius: 5px;
}

.image {
  margin-top: 20px;
}

img {
  width: 200px;
  display: inline-block;
  object-fit: cover;
}

.operate {
  background-color: #1989fa;
  border: none;
  color: #fff;
  font-size: 18px;
  width: 100px;
  height: 44px;
  border-radius: 5px;
  display: block;
  margin: 20px auto 0;
}

button:active {
  background-color: rgba(25, 137, 250, 0.7);
}
</style>
